<template>
  <div>
    <div>
      <el-input-number v-model="promiseNum"></el-input-number>
      <el-button
        @click="updatePromiseLimitNum"
      >修改promise并发数量
      </el-button>
    </div>
    <div>
      <el-input-number v-model="createPromiseNum"></el-input-number>
      <el-button
        @click="createPromise"
      >创建promise并发
      </el-button>
    </div>
    <div>
      <div v-for="(item,index) in result"
           :key="'resukt' + index"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import LimitPromise from "@localModules/ZhiXinLib/utils/LimitPromise";

export default {
  name: "LimitPromiseView",
  data() {
    return {
      result: [],
      promiseNum: 3,
      createPromiseNum: 12,
      limitPromise: new LimitPromise(3)
    }
  },
  methods: {
    updatePromiseLimitNum() {
      this.limitPromise = new LimitPromise(this.promiseNum)
    },
    createPromise() {
      this.result = []
      for (let i = 0; i < this.createPromiseNum; i++) {
        const task =
          this.limitPromise.call(() => {
            return this.promiseReq(i)
          })
        task.then(res => {
          this.result.push(res)
        })
      }
    },
    promiseReq(req){
      console.log(req)
      return new Promise((resolve, reject) => {
        setTimeout(()=>{
          resolve(req)
        },1000)
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
